x<template>
    <div>
        <Modal v-model="affirmModal" title="确认操作" width="20" @on-ok="handleSubmit">
            <div style="text-align:center"> <p>是否确认保存!</p> </div>
        </Modal>
        <Button v-if="showBackBtn" class="goBack" type="primary" @click="$router.back()"><Icon type="ios-arrow-back" /> 返回  </Button>
        <Card class="line-style" v-for="(item,index) in streetList" :key="item.id">
            <div class="line-wrap">
                <div class="line-title">{{item.street_name}}</div>
                <div class="line-main">
                    <Form :ref="'streetList'+item.street_id" :model="item" :rules="formRules"  :label-width="100">
                     <Row>
                         <Col span="7">
                             <FormItem label="确诊人数" prop="confirm_num">
                                 <Input type="number" number v-model="item.confirm_num" placeholder="输入确诊人数" />
                             </FormItem>
                         </Col>
                         <Col span="7">
                             <FormItem label="疑似病例" prop="suspected_num">
                                 <Input type="number"  number v-model="item.suspected_num" placeholder="输入疑似病例人数" />
                             </FormItem>
                         </Col>
                         <Col span="7">
                             <FormItem  label="治愈病例" prop="cure_num">
                                 <Input type="number" number v-model="item.cure_num" placeholder="输入治愈病例人数" />
                             </FormItem>
                         </Col>
                         <Col span="7">
                             <FormItem  label="排除病例" prop="exclude_num">
                                 <Input type="number" number v-model="item.exclude_num" placeholder="输入排除病例人数" />
                             </FormItem>
                         </Col>
                         <Col span="7">
                             <FormItem  label="死亡病例" prop="dead_num">
                                 <Input  type="number" number v-model="item.dead_num" placeholder="输入死亡病例人数" />
                             </FormItem>
                         </Col>
                         <Col span="7">
                             <Form-item label="上报日期" prop="imp_date">
                                 <DatePicker @on-change="dateChange($event,index)" :value="item.imp_date" :options="timeLimit"
                                             format="yyyy-MM-dd"  type="date" placeholder="选择上报日期" ></DatePicker>
                             </Form-item>
                         </Col>
                     </Row>
                    </Form>
                    <div class="line-button" v-if="!showDetail">
                        <Button type="primary" @click="validateForm('streetList'+item.street_id,index)">保存</Button>
                    </div>
                </div>
            </div>
        </Card>

    </div>
</template>

<script>
import { getStreetData } from '@/api/outbreak-management/public'
import { insert, findList, update } from '@/api/outbreak-management/outbreak-surveillance/street-epidemic'

// 街道疫情概览
export default {
  data () {
    const validateInt = (rule, value, callback) => {
      if (value % 1 !== 0) {
        callback(new Error('请输入整数'))
      } else {
        callback()
      }
    }
    return {
      // 时间限制 不可选择当天之前
      timeLimit: {
        disabledDate (date) {
          return date && date.valueOf() > Date.now()
        }
      },
      // 提示框
      affirmModal: false,
      // 控制保存按钮显隐
      showDetail: false,
      // 控制回退按钮显示
      showBackBtn: false,
      // 街道列表
      streetList: [],
      currentIndex: '',
      // 添加表单
      formCustom: {
        confirm_num: '',
        suspected_num: '',
        cure_num: '',
        exclude_num: '',
        dead_num: '',
        area_id: '',
        street_id: '',
        imp_date: ''
      },
      // 表单规则
      formRules: {
        confirm_num: [
          { required: true, type: 'number', message: '确诊人数必填', trigger: 'blur' },
          { min: 0, max: 99999999, type: 'number', message: '人员数量范围0-99999999', trigger: 'blur' },
          { validator: validateInt, trigger: 'blur' }
        ],
        suspected_num: [
          { required: true, type: 'number', message: '疑似病例必填', trigger: 'blur' },
          { min: 0, max: 99999999, type: 'number', message: '人员数量范围0-99999999', trigger: 'blur' },
          { validator: validateInt, trigger: 'blur' }
        ],
        cure_num: [
          { required: true, type: 'number', message: '治愈病例必填', trigger: 'blur' },
          { min: 0, max: 99999999, type: 'number', message: '人员数量范围0-99999999', trigger: 'blur' },
          { validator: validateInt, trigger: 'blur' }
        ],
        exclude_num: [
          { required: true, type: 'number', message: '排除病例必填', trigger: 'blur' },
          { min: 0, max: 99999999, type: 'number', message: '人员数量范围0-99999999', trigger: 'blur' },
          { validator: validateInt, trigger: 'blur' }
        ],
        dead_num: [
          { required: true, type: 'number', message: '死亡病例必填', trigger: 'blur' },
          { min: 0, max: 99999999, type: 'number', message: '人员数量范围0-99999999', trigger: 'blur' },
          { validator: validateInt, trigger: 'blur' }
        ],
        imp_date: [
          { required: true, message: '上报时间必填', trigger: 'blur' }
        ]
      },
      // 编辑的时间
      editDate: false
    }
  },
  created () {
    this.isEditStatus()
  },
  methods: {
    // 日期转字符串
    dateChange (date, index) {
      for (let i = 0; i < this.streetList.length; i++) {
        this.streetList[i].imp_date = date
      }
    },
    // 重置
    handleReset (name) {
      this.$refs[name].resetFields()
    },
    // 校验保存数据
    validateForm (name, index) {
      this.$refs[name][0].validate((valid) => {
        if (valid) {
          this.currentIndex = index
          this.affirmModal = true
        } else {
          this.$Message.error('表单验证失败,请检查后再试!')
        }
      })
    },
    // 保存
    handleSubmit (name) {
      let streetList = this.streetList[this.currentIndex]
      if (this.showBackBtn) {
        this.handleEdit(streetList)
      } else {
        this.handleAdd(streetList)
      }
    },
    // 新增
    handleAdd (streetList) {
      insert(streetList).then(({ data }) => {
        let { errcode } = data
        if (errcode === 0) {
          this.$Message.success('保存成功!')
          this.currentIndex = ''
        } else {
          this.$Message.warning('操作失败!')
        }
      })
    },
    // 修改
    handleEdit (streetList) {
      update(streetList).then(({ data }) => {
        let { errcode } = data
        if (errcode === 0) {
          this.$Message.success('更新成功!')
          this.currentIndex = ''
        } else {
          this.$Message.warning('操作失败!')
        }
      })
    },
    // 获取街道列表
    getStreetData () {
      getStreetData().then(({ data }) => {
        let { data: res, errcode } = data
        if (errcode === 0 && res.length > 0) {
          let streetList = []
          res.forEach(item => {
            let { id, pid, street } = item
            let formObj = { street_id: id, area_id: pid, street_name: street, confirm_num: 0, suspected_num: 0, cure_num: 0, exclude_num: 0, dead_num: 0, imp_date: '' }
            streetList.push(formObj)
          })
          this.streetList = streetList
        }
      })
    },
    // 获取修改信息
    getEditInfo () {
      findList({ imp_date: this.editDate }).then(res => {
        let { errcode, data } = res.data
        if (errcode === 0) {
          let streetList = []
          data.forEach(item => {
            item.imp_date = this.$common.moment(item.imp_date).format('YYYY-MM-DD')
            streetList.push(item)
          })
          this.streetList = streetList
        } else {
          this.$Message.success('获取信息失败!')
        }
      })
    },
    // 修改状态
    isEditStatus () {
      if (this.$route.query && this.$route.query.imp_date) {
        this.showBackBtn = true
        this.editDate = this.$route.query.imp_date
        this.getEditInfo()
        if (this.$route.query.showDetail) {
          this.showDetail = true
        }
      } else {
        this.getStreetData()
      }
    }
  }
}
</script>

<style scoped> </style>
